<!--
 * @Description:缓动受琴.html
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-27 22:25:53
 -->
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>缓动受琴.html</title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			ul {
				list-style: none;
			}

			div {
				width: 1004px;
				height: 350px;
				margin: 50px auto;
				/* border: 1px solid red; */
				overflow: hidden;
			}

			div li {
				width: 200px;
				height: 350px;
				float: left;
				/* border: 1px solid red; */
				margin-left: -1px;
				background-size:cover;
				overflow: hidden;
			}
			#dv ul{
				width: 1004px;
			}
		</style>
	</head>

	<body>
		<div id="dv">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script>
			function $(id) {
				return document.getElementById(id);
			}
			
						//给谁 json
			function animate(obj, json) {
				clearInterval(obj.timer)
				obj.timer = setInterval(() => {
					var flag = true //用来判断是否停止定时器
					//计算步长 动画原理 盒子本身样式+步长
					// //我们怎么知道我们当前的样式
					// //当前样式 （target-当前样式）/10==步长
					for (const key in json) {
						var current = 0;
						if (key == "opacity") {
							current =Math.round(parseInt(getStyle(obj, "", key) * 100))||0
						} else {
							current = parseInt(getStyle(obj, "", key))
						}
						// current = parseInt(getStyle(obj, "", key)*100);
						var step = (json[key] - current) / 10; //步长
						step = step > 0 ? Math.ceil(step) : Math.floor(step) //取整步长
			
						//透明度
						if (key == "opacity") {
							if ("opacity" in obj.style) {
								obj.style.opacity = (current + step) / 100
							} else {
								obj.style.filter = "alpha(opacity=" + (current + step) + ")"
							}
						} else if (key == "zIndex") {
							obj.style.zIndex = json[key]
						} else {
							obj.style[key] = current + step + "px"
						}
			
						obj.style[key] = current + step + "px"
						//只要其中不满足条件 就不停止定时器
						if (current != json[key]) {
							flag = false
						}
					}
					if (flag) {//用于判断定时器的条件
						clearInterval(obj.timer)
					}
			
				}, 60)
			}
			
			function getStyle(ele, tum = null, attr) {
				if (window.getComputedStyle) { // 元素 伪类 css名字
					return window.getComputedStyle(ele, tum)[attr];
				}
				
				}
					
					
					
			window.onload = function() {
				var box = $("dv")
				var timer = null
				var lis = box.children[0].children
				for (var i = 0; i < lis.length; i++) {
					lis[i].style.background = "url(img/" + (i + 1) + ".jpg)"
          lis[i].style.backgroundSize="cover";
					lis[i].style.backgroundPosition="center center";


					lis[i].onmouseover = function() {
						for (var i= 0;i< lis.length; i++) {
							animate(lis[i], {
								width: 100
							})
						}
						animate(this, {
							width: 600
						})
					}
					
					lis[i].onmouseout=function(){
						for (var i= 0;i< lis.length; i++) {
							animate(lis[i], {
								width: 200
							})
						}
						
					}
					
				}
			}


		
		
		</script>

	</body>

</html>
